<template>
  <w-language>
    <a-layout class="layout-admin">
      <a-layout-sider v-model="collapsed" class="w-layout-sider" :trigger="null" collapsible>
        <div class="logo w-flex-center w-pointer" @click="logoClick">
          {{ collapsed ? 'King' : 'wangyabin.top' }}
        </div>
        <w-menu :collapsed="collapsed"/>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => collapsed = !collapsed"
          />
          <w-header />
        </a-layout-header>
        <a-layout-content class="w-layout-contnet">
          <nuxt />
          <w-loading />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </w-language>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import WMenu from '@/components/admin/main/menu'
import WHeader from '@/components/admin/main/header'
import WLanguage from '@/components/global/language'
import WLoading from '@/components/global/loading'

@Component({
  name: 'LayoutAdmin',
  components: {
    WMenu,
    WHeader,
    WLanguage,
    WLoading
  }
})
export default class LayoutAdmin extends Vue {
  collapsed = false

  logoClick() {
    this.$router.push('/')
  }
}
</script>

<style scoped lang="less">
  .layout-admin {
    height: 100vh;
    .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;
    }

    .trigger:hover {
      color: #1890ff;
    }

    .logo {
      height: 32px;
      background: rgba(255, 255, 255, 0.2);
      margin: 16px;
      font-size: 20px;
      color: #999;
    }

    .logo:hover {
      color: #fff;
    }

    .w-layout-contnet {
      padding: 16px;
      margin: 16px;
      background-color: #fff;
      border-radius: 6px;
      overflow: auto;
    }

    .w-layout-sider {
      overflow: auto;
    }
  }

</style>
